<!-- eslint-disable prettier/prettier -->
<template>
  <div class="row">
    <div class="col-xl-4 col-lg-5 col-md-6">
      <user-card> </user-card>
      <members-card> </members-card>
    </div>
    <keep-alive>
      <div class="col-xl-8 col-lg-7 col-md-6">
        <component :is="component" v-if="component" ref="tmp" />
      </div>
    </keep-alive>
  </div>
</template>
<script>
import EditProfileForm from "./UserProfile/EditProfileForm.vue";
import UserCard from "./UserProfile/UserCard.vue";
import MembersCard from "./UserProfile/MembersCard.vue";
import LoginCard from "./UserProfile/LoginCard.vue";
import RegistryCard from "./UserProfile/RegistryCard.vue";
export default {
  components: {
    LoginCard,
    EditProfileForm,
    UserCard,
    MembersCard,
    RegistryCard
  },
  props: ["data", "type"],
  
  data() {
    return {
      component: null,
      flag:true,
    };
  },
  computed: {
    loader() {
        return ()=>  import(`./UserProfile/LoginCard.vue`);
    },
    log(){
      return ()=>  import(`./UserProfile/EditProfileForm.vue`);
    },
    upd(){
      return ()=>  import(`./UserProfile/RegistryCard`);
    },
    
    loaderOKR(){
        return () => import(`./UserProfile/EditProfileForm.vue`);
      
    }
  },
  methods:{
    a(){
      this.component = () => this.log()
    },
    b(){
      this.component = () =>this.upd()
    },
    c(){
      this.component = () =>this.loaderOKR()
    },
    tmp(){
      this.component=()=>this.loader()
    }
  },
  mounted:function(){
    if(sessionStorage.getItem("logStatu")=="OK"){
      this.a()
    }else if (sessionStorage.getItem("logStatu") == "OKR") {
      this.c()
    }
    else{
      this.tmp()
    }
  },
  
  updated:function(){


  }
    
     
    
  
  
 
}  

</script>